var vertexShader = 
`attribute vec2 a_position;
void main()
{
    gl_Position = vec4(a_position, 0, 1);
}`;
var fragmentShader = 
`void main() {
    gl_FragColor = vec4(0, 1, 0, 1);  // green
  }
`;
var vertexShader_texture = 
`
attribute vec2 a_position;
attribute vec2 a_texCoord;
varying mediump vec2 v_texCoord;
void main()
{
    gl_Position = vec4(a_position, 0, 1);
    v_texCoord = a_texCoord;
}
`;
var fragmentShader_texture = 
`
precision lowp float;
varying vec2 v_texCoord;
uniform sampler2D u_Sample;
void main()
{
    gl_FragColor = texture2D(u_Sample, v_texCoord);
    // gl_FragColor = vec4(1, 0, 0, 1);
}
`;
function main()
{
    var canvas = document.getElementById("canvas");
    gl = canvas.getContext("experimental-webgl");
    if(!gl)
    {
        console.log("your browers not support webgl");
        return;
    } 

    program = createGLProgram(vertexShader_texture, fragmentShader_texture);

    
    var img = new Image();
    img.src = "http://localhost/image.png";
    img.crossOrigin = "";
    img.onload = function()
    {
        drawScene(img);
    }
    
}

function createShaderByType(shaderSource, shaderType)
{
    var shader = gl.createShader(shaderType);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) 
    {
        console.error(gl.getShaderInfoLog(fs));
    }
    return shader;
}

function drawScene(img)
{

    gl.useProgram(program);
    var vertices =  new Float32Array([
        // -0.5, -1.0,
        //  1.0, -1.0,
        // -0.5,  1.0,
        // -0.5,  1.0,
        //  1.0, -1.0,
        //  1.0,  1.0

        -1, -1.0,     0, 0,
         0.8, -1.0,     1, 0,
        -1,  1.0,     0, 1,
        -0.8,  1.0,     0, 1,
         1, -1.0,     1, 0,
         1,  1.0,     1, 1,
          
        
        ]);
    var posBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,
        vertices,
        gl.STATIC_DRAW);

    var FSIZE = vertices.BYTES_PER_ELEMENT;
    
    var positionLocation = gl.getAttribLocation(program, "a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, FSIZE * 4, 0);

    a_texCoord = gl.getAttribLocation(program, 'a_texCoord');
    gl.vertexAttribPointer(a_texCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
    gl.enableVertexAttribArray(a_texCoord);

    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    

    u_Sampler = gl.getUniformLocation(program, 'u_Sampler');
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.uniform1i(u_Sampler, 0);
    
    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 6;

    gl.clearColor(0.25, 0.25, 0.25, 1);//设置clearColor
    gl.clear(gl.COLOR_BUFFER_BIT);     //clear
    gl.drawArrays(primitiveType, offset, count);
    console.log("draw end!");

}

main();


function createGLProgram(vertexShaderSource, fragmentShaderSource)
{
    var resultProgram = gl.createProgram();
    var resVs = createShaderByType(vertexShaderSource, gl.VERTEX_SHADER);
    var resFs = createShaderByType(fragmentShaderSource, gl.FRAGMENT_SHADER);
    gl.attachShader(resultProgram, resVs);
    gl.attachShader(resultProgram, resFs);
    gl.linkProgram(resultProgram);
    if(!gl.getProgramParameter(resultProgram, gl.LINK_STATUS))
    {
        // var info = gl.getProgramParameter(resultProgram);
        throw new Error('Could not compile WebGL program.' /*+ info*/);
    }
    return resultProgram;
}

function createShaderByType(shaderSource, shaderType)
{
    var shader = gl.createShader(shaderType);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) 
    {
        console.error(gl.getShaderInfoLog(shader));
    }
    return shader;
}